package com.example.bloom.ui.page

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.bloom.ui.theme.BloomTheme
import com.example.bloom.ui.widget.BloomSecondaryButton
import androidx.compose.runtime.*
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.navigation.NavController
import androidx.navigation.compose.navigate
import androidx.navigation.compose.rememberNavController

@Composable
fun LoginScreen(navController: NavController) {
    Surface(
        color = MaterialTheme.colors.background,
        modifier = Modifier
            .fillMaxSize()
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp),
        ) {
            LoginHeader()

            EmailInput()

            Spacer(Modifier.height(8.dp))

            PasswordInput()

            TermsOfServiceLabel()

            LoginButton(navController)
        }
    }
}

@Composable
private fun LoginButton(navController: NavController) {
    BloomSecondaryButton("Log in") {
        navController.navigate("home")
    }
}

@Composable
private fun TermsOfServiceLabel() {
    Text(
        "By clicking below you agree to our Terms of Use and consent to our Privacy Policy.",
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.body2,
        modifier = Modifier
            .paddingFromBaseline(top = 24.dp, bottom = 16.dp)
    )
}

@Composable
private fun PasswordInput() {

    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = {
            text = it
        },
        label = {
            Text(text = "Password (8+ characters)")
        },
        keyboardOptions = KeyboardOptions.Default.copy(
            keyboardType = KeyboardType.Password,
        ),
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedLabelColor = MaterialTheme.colors.primary
        ),
        visualTransformation = PasswordVisualTransformation(),
        modifier = Modifier.fillMaxWidth()
    )
}

@Composable
private fun EmailInput() {

    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = {
            text = it
        },
        label = {
            Text(text = "Email address")
        },
        keyboardOptions = KeyboardOptions.Default.copy(
            keyboardType = KeyboardType.Email,
        ),
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedLabelColor = MaterialTheme.colors.primary
        ),
        modifier = Modifier.fillMaxWidth()
    )
}

@Composable
private fun LoginHeader() {
    Text(
        "Log in with email",
        style = MaterialTheme.typography.h1,
        modifier = Modifier.paddingFromBaseline(top = 184.dp, bottom = 16.dp)
    )
}

@Preview
@Composable
fun PreviewDarkLoginScreen() {
    BloomTheme(darkTheme = true) {
        LoginScreen(rememberNavController())
    }
}

@Preview
@Composable
fun PreviewLightLoginScreen() {
    BloomTheme {
        LoginScreen(rememberNavController())
    }
}